<template>
	<div>
		<!-- 头部 -->
		<div class="div_top_title ">
			<i class="el-icon-arrow-left i_left"></i>
			<label> 美食 </label>
			<i class="el-icon-search i_right"></i>
		</div>
		
		<!-- 导航栏 -->
		<div class="div_nav">
			<div>
				<ul>
					<li>全部</li>
					<li>地方菜系</li>
					<li>面食糕点</li>
					<li>简餐便当</li>
					<li>汉堡披萨</li>
				</ul>
			</div>
			<i class="el-icon-arrow-down"></i>
		</div>
		
		
		<!-- 筛选栏 -->
		<div class="div_sort">
			<ul>
				<li>综合排序  <i class="el-icon-arrow-down"></i> </li>
				<li>距离</li>
				<li>销量</li>
				<li>筛选 <i class="el-icon-bell"></i> </li>
			</ul>
		</div>
		
		<div class="div_type">
			<button> 品质联盟 </button>
			<button> 减满优惠 </button>
			<button> 新店 </button>
			<button> 品牌商家 </button>
		</div>
		
		<!-- 商品栏 -->
		<div class="div_foods" v-for="(item,index) in allData">
			<div class="div_img">
				<img :src=item.imgSrc />
			</div>
			
			<div class="div_text">
				<p>{{item.title}}  <i class="el-icon-sort-down"></i> </p>
				<table>
					<tr>
						<td> <i class="el-icon-star-on"></i> {{item.star}}</td>
						<td> 月售 {{item.monthSale}} </td>
					</tr>
					
					<tr>
						<td> 起送￥{{item.beginMoney}}</td>
						<td> 配送￥{{item.sendMoney}} </td>
						<td>{{item.time}}</td>
						<td>{{item.distance}}</td>
					</tr>
				</table>
				<button class="btn_orange"> {{item.orangeText}} </button> <br />
				
				<button class="btn_small"
				v-for=" value in item.smallItem"
				:class="{btn_small_red:value.red,
				btn_small_black:value.black,
				btn_small_yellow:value.yellow}"> 
				{{value.text}} 
				</button>
				
				<i class="el-icon-arrow-down i_down" :class="{arrow:!item.arrowFlag}" @click="showItem(index)"></i>
				<i class="el-icon-arrow-up i_down" :class="{arrow:item.arrowFlag}" @click="showItem(index)"></i> 
				
				<!--  -->
				<div :class="{div_hidden_btn:item.hiddenBtn}">
					<button class="btn_small"
					v-for="value2 in item.HiddenSmallItem"
					:class="{btn_small_red:value2.red,
					btn_small_yellow:value2.yellow,
					btn_small_black:value2.black}"> 
					{{value2.text}} 
					</button>
				</div>
				 
			</div>
		</div>
	
		
	</div>
</template>

<script>
	export default{
		data(){
			return{				
				allData:[{
					imgSrc:"../../../static/img/list1.png",
					title:"必胜客宅急送(华府广场店)",
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					orangeText:"欢迎来到披萨乐园",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},
						{text:"首单减17",red:true,yellow:false,black:false},],
					HiddenSmallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},]
				},{
					imgSrc:"../../../static/img/list2.png",
					title:"必胜客宅急送(华府广场店)",
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					orangeText:"欢迎来到披萨乐园",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},
						{text:"首单减17",red:true,yellow:false,black:false},],
					HiddenSmallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},]
				},{
					imgSrc:"../../../static/img/list3.png",
					title:"必胜客宅急送(华府广场店)",
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					orangeText:"欢迎来到披萨乐园",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},
						{text:"首单减17",red:true,yellow:false,black:false},],
					HiddenSmallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},]
				},{
					imgSrc:"../../../static/img/list4.png",
					title:"必胜客宅急送(华府广场店)",
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					orangeText:"欢迎来到披萨乐园",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},
						{text:"首单减17",red:true,yellow:false,black:false},],
					HiddenSmallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},]
				},{
					imgSrc:"../../../static/img/list5.png",
					title:"必胜客宅急送(华府广场店)",
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					orangeText:"欢迎来到披萨乐园",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},
						{text:"首单减17",red:true,yellow:false,black:false},],
					HiddenSmallItem:[{text:"80减5",red:true,yellow:false,black:false},
						{text:"6元会员红包",red:false,yellow:true,black:false},
						{text:"品质联盟",red:true,yellow:false,black:false},
						{text:"19元特价",red:true,yellow:false,black:false},]
				}]
			}
		},methods:{
			showItem(index){
				this.allData[index].hiddenBtn = !this.allData[index].hiddenBtn;
				this.allData[index].arrowFlag = !this.allData[index].arrowFlag;
			}
		}
	}
</script>

<style lang="scss">
@function px2rem($px){
	$rem : 41.4px;
	@return $px/$rem + rem;
}

$theColor:#479df8;

body{
	padding: 0;
	margin: 0;
	ul{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	p{
		margin: 0;
	}
}

/* 最上面的标题栏 */
.div_top_title{
	width: 100%;
	height: px2rem(25px);
	padding-top: px2rem(25px);
	background: $theColor;
	color: white;
	padding-bottom: px2rem(15px);
	font-weight: bold;
	font-size: px2rem(18px);
	label{
		letter-spacing: px2rem(3px);
	}
	.i_right{
		font-size: px2rem(25px);
		float: right;
		margin-right: px2rem(10px);
	}
	.i_left{
		font-size: px2rem(25px);
		float: left;
		margin-left: px2rem(10px);
	}
}

/* 导航栏 */
.div_nav{
	width: 100%;
	height: px2rem(35px);
	
	background: $theColor;
	color: rgb(169, 226, 252);
	font-size: px2rem(14px);
	position: sticky;
	top:0px;
	z-index: 100;
	
	
	div{
		width: 90%;
		float: left;
		padding-top: px2rem(5px);
		
		ul{
			display: inline;
			li:nth-child(1){
				font-weight: bold;
				color: white;
				padding-bottom: px2rem(6px);
				border-bottom: px2rem(3px) solid white;
			}
			li{
				margin-left:px2rem(13px); 
				height: px2rem(20px);
				display: inline-block;
				cursor: pointer;
			}
			
		}
	}
	i{
		float: right;
		font-size: px2rem(16px);
		margin-right: px2rem(10px);
		margin-top: px2rem(7px);
	}
	
}

/* 筛选栏 */
.div_sort{
	width: 100%;
	height: px2rem(35px);
	line-height: px2rem(35px);
	font-size: px2rem(13px);
	font-weight: 600;
	color: #666;
	letter-spacing: px2rem(1px);
	
	ul{
		display: inline;
		li:nth-child(1){
			color: $theColor;
		}
		li:nth-child(4){
			width: px2rem(165px);
			text-align: right;
			margin-right:0;
		}
		
		li{
			display: inline-block;
			margin-right: px2rem(15px);
		}
	}
}

.div_type{
	width: 100%;
	background: white;
	line-height: 0;
	position: sticky;
	top:px2rem(35px);
	z-index:100;
	height: px2rem(42px);
	//padding-top: px2rem(10px);
	
	button{
		margin-top: px2rem(10px);
		font-size: px2rem(12px);
		color: #666;
		background: rgb(243, 243, 243);
		border: none;
		height: px2rem(30px);
		width: px2rem(80px);
		border-radius: px2rem(3px);
	}
}

/* 商品列表 */
.div_foods{
	width: 100%;
	height: px2rem(100px);
	font-size: px2rem(12px);
	padding-top: px2rem(9px);
	
	.div_img{
		float: left;
		margin-left: px2rem(10px);
		margin-top: px2rem(10px);
		img{
			width: px2rem(70px);
			height: px2rem(70px);
			border: 1px solid #ccc;
			border-radius: px2rem(2px);
		}
	}
	
	.div_text{
		width: px2rem(290px);
		float: left;
		text-align: left;
		border-bottom: px2rem(1px) solid #eee;
		padding-bottom: px2rem(8px);
		margin-top: px2rem(8px);
		padding-left: px2rem(10px);
		position: relative;
		p{
			font-size: px2rem(16px);
			font-weight: bold;
			margin-bottom: px2rem(3px);
			position: relative;
			width: 100%;
			i{
				float: right;
				font-size: px2rem(20px);
				position: absolute;
				left: px2rem(260px);
				top: px2rem(3px);
				color: #ccc;
			}
		}
		table{
			color: #888;
			tr:nth-child(1) td:nth-child(1){
				color: rgb(237, 109, 044);
			}
			tr:nth-child(2) td:nth-child(3){
				padding-left: px2rem(70px);
			}
			tr td:nth-child(1){
				padding-left: 0;
			}
			td{
				padding-left: px2rem(10px);
			}

		}
		
		.btn_orange{
			border: none;
			background: rgb(253, 244, 235);
			border-radius: px2rem(2px);
			color: rgb(237, 109, 044);
			padding: px2rem(2px) px2rem(8px);
			margin-top: px2rem(3px);
			font-size: px2rem(14px);
		}
		
		.btn_small{
			font-size: px2rem(9px);
			padding: px2rem(2px) px2rem(3px);
			background: white;
			border: none;
			margin-top: px2rem(5px);
			margin-right: px2rem(3px);
		}
		.btn_small_red{
			color: rgb(219, 117, 108);
			border: px2rem(1px) solid rgb(238, 196, 192);
		}
		.btn_small_yellow{
			color: rgb(152, 096, 032);
			border: px2rem(1px) solid rgb(223, 207, 183);
		}
		.btn_small_black{
			color: #999;
			border: px2rem(1px) solid #eee;
		}
		.i_down{
			color: #ccc;
			position: absolute;
			left: 93%;
			top:83%;
		}
		
		.div_hidden_btn,.arrow{
			display: none;
		}
		
	}
}

</style>
